<template>
  <div>
    <div>name: <el-input v-model="params.name"></el-input></div>
    <div>description: <el-input v-model="params.description"></el-input></div>
    <div>createTime: <el-input v-model="params.createTime"></el-input></div>
    <div>
      <el-button type="primary" @click="search">搜索</el-button>
    </div>
  </div>
  <el-table :data="tableData">
    <el-table-column prop="name" label="角色名称"></el-table-column>
    <el-table-column prop="description" label="角色描述"></el-table-column>
  </el-table>
  <ElConfigProvider :locale="zhCn">
    <el-pagination
      v-model:currentPage="pageNum"
      v-model:page-size="pageSize"
      background
      layout="total, sizes, prev, pager, next ,jumper"
      :total="total"
      @size-change="pageSizeChange"
      @current-change="pageNumChange"
      :page-sizes="[10, 20, 50, 100]"
    />
  </ElConfigProvider>
</template>
<script setup lang="ts">
import { user } from "@/api";
import { useTable } from "@/hooks/useTable";
import zhCn from "element-plus/lib/locale/lang/zh-cn";
import { ElConfigProvider } from "element-plus";
import { reactive } from "vue";

// 可能有多个条件
const params = reactive({
  name: "",
  description: "",
  createTime: "",
});

const {
  tableData,
  pageNum,
  pageSize,
  total,
  pageNumChange,
  pageSizeChange,
  search,
} = useTable(user.queryRoleListApi, params);
</script>
<style lang="less" scoped></style>
